import { useStore } from '@/hooks';
import { Timeline, Button } from '@alifd/next';
import React, { useEffect, useState } from 'react';
import { DATETIME_TEXT } from '../stores/definitions';
import DrawerFooter from '@/components/DrawerFooter';
import { t } from '@lingui/macro';

const TimelineItem = Timeline.Item;

const OrderLogs = ({ id, onCancel }) => {
  const [logs, setLogs] = useState([]);
  const { activityStore: store } = useStore();

  useEffect(() => {
    (async () => {
      const data = await store.getLogs({ search: { targetIds: [id] } });
      setLogs(toJS(data));
    })();
  }, []);

  if (logs.length <= 0 || !id) return <></>;

  return (
    <div style={{ marginTop: 20 }}>
      <Timeline style={{ width: '30%', margin: '0 auto' }}>
        {logs.map((logInfo, idx) => {
          const { title, ts, id: keyId } = logInfo;
          return (
            <TimelineItem
              state={idx === 0 ? 'process' : 'done'}
              key={`${keyId}-${idx}`}
              title={title}
              timeLeft={<span style={{ width: '200px', float: 'right' }}>{DATETIME_TEXT(ts)}</span>}
            />
          );
        })}
      </Timeline>
      <DrawerFooter>
        <Button style={{ marginLeft: 8 }} onClick={() => onCancel()}>{t`取消`}</Button>
      </DrawerFooter>

    </div>
  );
};

export default OrderLogs;
